<template>
  <div class="title text-[1.2vh] font-[bold]">
    <!-- <box-icon color="#ffffff" size="18px" name="map" class="v-top" /> -->
    <el-tag
      @click="f_ChangeDay(0)"
      type="primary"
      :class="{ 'active-tag': activeTag == 0 }"
      class="bg-[#ffffffb5!important] cursor-pointer mr-[6px] v-bottom"
      >今天</el-tag
    ><el-tag
      @click="f_ChangeDay(1)"
      type="primary"
      :class="{ 'active-tag': activeTag == 1 }"
      class="bg-[#ffffffb5!important] cursor-pointer mr-[6px] v-bottom"
      >昨天</el-tag
    ><el-tag
      @click="f_ChangeDay(2)"
      type="primary"
      :class="{ 'active-tag': activeTag == 2 }"
      class="bg-[#ffffffb5!important] cursor-pointer mr-[8px] v-bottom"
      >前天</el-tag
    >巡线人员({{ moment(dayDate).format("MM月DD日") }})
  </div>
  <div>
    <el-row class="mt-[1vh]" :gutter="10">
      <el-col
        :span="24"
        v-for="(item, index) in activeTag == 0
          ? inspUserData0
          : activeTag == 1
            ? inspUserData1
            : inspUserData2"
        :key="index"
        item.classId
        class="mb-[0.8vh]"
      >
        <div style="padding: 0.4vh; background: #123c65e6">
          <p class="mt-[0.2vh] mb-[0.2vh] text-center">
            <el-checkbox
              class="mr-[4px] ml-[8px] float-left pb-[4px]"
              @change="f_Change"
              v-model="item.checked"
            ></el-checkbox>
            <span class="ml-[8px]">{{ item.inspUserName }} (巡检轨迹)</span>
          </p>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import moment from "moment";
import DashboardAPI from "@/api/DashboardAPI";
import DangerAPI from "@/api/DangerAPI";
const inspUserData: Array = ref([]);
const inspUserData0: Array = ref([]);
const inspUserData1: Array = ref([]);
const inspUserData2: Array = ref([]);
const activeTag = ref(0);
const dayDate = ref(new Date());
const emits = defineEmits(["getposition"]);

// f_Change
function f_Change() {
  emits("getposition", inspUserData.value);
  // inspUserData.value = JSON.parse(JSON.stringify(inspUserData.value));
}
// 上一日 下一日
function f_ChangeDay(type) {
  activeTag.value = type;
  dayDate.value = new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * type);
  inspUserData.value.forEach((item, index) => {
    if (item.type == type) {
      inspUserData.value[index].checked = true;
    } else {
      inspUserData.value[index].checked = false;
    }
  });
  if (type == 0) {
    inspUserData0.value.forEach((item, index) => {
      inspUserData0.value[index].checked = true;
    });
    inspUserData1.value.forEach((item, index) => {
      inspUserData1.value[index].checked = false;
    });
    inspUserData2.value.forEach((item, index) => {
      inspUserData2.value[index].checked = false;
    });
  }
  if (type == 1) {
    inspUserData0.value.forEach((item, index) => {
      inspUserData0.value[index].checked = false;
    });
    inspUserData1.value.forEach((item, index) => {
      inspUserData1.value[index].checked = true;
    });
    inspUserData2.value.forEach((item, index) => {
      inspUserData2.value[index].checked = false;
    });
  }
  if (type == 2) {
    inspUserData0.value.forEach((item, index) => {
      inspUserData0.value[index].checked = false;
    });
    inspUserData1.value.forEach((item, index) => {
      inspUserData1.value[index].checked = false;
    });
    inspUserData2.value.forEach((item, index) => {
      inspUserData2.value[index].checked = true;
    });
  }
}

// 今日巡线人员
function f_QueryInspUser0() {
  inspUserData.value = [];
  let startTime = moment(new Date(new Date().getTime())).format(
    "YYYY-MM-DD 00:00:00"
  );
  let endTime = moment(new Date()).format("YYYY-MM-DD 23:59:58");
  f_HandelQueryUserPosition(startTime, endTime, 0);
}

function f_QueryInspUser1() {
  let startTime = moment(
    new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 1)
  ).format("YYYY-MM-DD 00:00:00");
  let endTime = moment(
    new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 1)
  ).format("YYYY-MM-DD 23:59:58");
  f_HandelQueryUserPosition(startTime, endTime, 1);
}

function f_QueryInspUser2() {
  let startTime = moment(
    new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 2)
  ).format("YYYY-MM-DD 00:00:00");
  let endTime = moment(
    new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 2)
  ).format("YYYY-MM-DD 23:59:58");
  f_HandelQueryUserPosition(startTime, endTime, 2);
}

// 查询当前巡检人员的轨迹
function f_HandelQueryUserPosition(startTime, endTime, type) {
  let params = {
    StartTime: startTime,
    EndTime: endTime,
  };
  DangerAPI.api_insp_task_user_position(params).then(({ data, succeeded }) => {
    if (succeeded) {
      if (type == 0) {
        inspUserData0.value = data;
        inspUserData0.value.forEach((item, index) => {
          inspUserData0.value[index].type = 0;
          inspUserData0.value[index].checked = true;
          inspUserData0.value[index].id =
            item.inspUserId + new Date().getTime();
        });
        f_QueryInspUser1();
      } else if (type == 1) {
        inspUserData1.value = data;
        inspUserData1.value.forEach((item, index) => {
          inspUserData1.value[index].type = 1;
          inspUserData1.value[index].checked = true;
          inspUserData1.value[index].id =
            item.inspUserId + new Date().getTime();
        });
        f_QueryInspUser2();
      } else if (type == 2) {
        inspUserData2.value = data;
        inspUserData2.value.forEach((item, index) => {
          inspUserData2.value[index].type = 2;
          inspUserData2.value[index].checked = true;
          inspUserData2.value[index].id =
            item.inspUserId + new Date().getTime();
        });
        inspUserData.value = inspUserData0.value
          .concat(inspUserData1.value)
          .concat(inspUserData2.value);

        f_Change();
      }
    }
  });
}

onMounted(() => {
  activeTag.value = 0;
  f_QueryInspUser0();
});
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  background: transparent;

  > div:first-child,
  > div:first-child + div + div {
    flex: 1;
    // display: flex;
    // justify-content: center;
  }

  > div:first-child + div,
  > div:first-child + div + div + div {
    flex: 2;
    padding-top: 2vh;
  }

  > div {
    > div {
      height: 9vh;

      img {
        position: relative;
        top: 50%;
        width: 100%;
        height: auto;
        transform: translateY(-50%);
      }

      p {
        height: 3vh;
        margin: 0;
        line-height: 3vh;
        text-align: center;
      }

      > p:first-child {
        font-family: YouSheBiaoTiHei, sans-serif;
        font-size: 1.8vh;
        color: #fcd966;
      }

      > p:last-child {
        font-size: 1vh;
      }
    }
  }
}

.star {
  padding: 1vh;

  > div {
    margin-bottom: 0.5vh;
    font-size: 1vh;
    color: #c2e0ffa4;

    span {
      display: inline-block;
      width: 1.2vh;
      height: 1.2vh;
      margin-right: 0.6vh;
      line-height: 1.2vh;
      vertical-align: sub;
      background: #fff;
      border-radius: 50%;
    }

    span.color1 {
      background: #0f8;
    }

    span.color2 {
      background: #a2e7b7;
    }

    span.color3 {
      background: #fcd966;
    }

    span.color4 {
      background: #ee6868;
    }
  }
}
.active-tag {
  background: #ff9800 !important;
  color: #fff;
}
</style>
